<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org/">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <base th:href="${#servletContext.getContextPath()+'/'}">

    <script src="js/jquery.js" type="text/javascript"></script>
    <!--<script type="text/javascript" src="http://localhost:9002/server2"></script>-->


    <script type="text/javascript">
        function hello(msg){
            alert(msg);
        }
    </script>

    <!-- ?name=admin-->
    <script type="text/javascript" src="http://localhost:9002/server3?callback=hello"></script>



    <script type="text/javascript">
        $(function () {
            $("#but1").click(function(){
                $.get("http://localhost:9001/server1",null,function(data){
                    console.info(data);
                });
            });

            $("#but2").click(function(){
                // 会存在跨域问题
                $.get("http://localhost:9002/server2",null,function(data){
                    console.info(data);
                });
            });


            $("#but3").click(function(){
                // ajax的JSONP是不会存在跨域的问题
                $.ajax({
                    url:"http://localhost:9002/server2",
                    type:"GET",
                    dataType:"jsonp",
                    jsonpCallback:"abc",
                    success:function(data){
                        console.info(data);
                    }
                })
            });

            // 1.动态创建一个<script>标签

            // 2.设置src属性 <script src = "http://localhost:9002/server2?callback=callback">

            // 3.服务端接收请求的参数 callback

            // 4.拼接成一个方法 callback('server1')

            // 5.把这个方法的字符串返回给前端
        })
    </script>
</head>
<body>

<button id="but1">server1</button>
<br>
<button id="but2">server2</button>
<br>
<button id="but3">使用Ajax的JSONP发送请求</button>
<br>

<form action="http://localhost:9002/server2" method="post">
    <input type="submit" value="提交">
</form>

</body>
</html>